<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/static/img/favicon.ico">

    <title>登陆 - SQL分析</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">

    <link href="/static/css/bootstrapValidator.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="/static/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/static/css/signin.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="/static/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">

      <!-- <form class="form-signin" id="loginForm">
        <h2 class="form-signin-heading">用户登录</h2>
        <label for="inputEmail" class="sr-only">用户名/邮箱</label>
        <input type="email" id="username" class="form-control" placeholder="用户名/邮箱" name="username" required autofocus>
        <label for="inputPassword" class="sr-only">密码</label>
        <input type="password" id="pwd" class="form-control" placeholder="密码" name="pwd" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" name="remember-me" id="rememberMe"> 记住密码
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="button" id="loginBtn"> 登 陆 </button>
        <a href="/register" style="margin-top: 10px;float: right;">马上注册</a>
      </form> -->
      <div class="jumbotron" style="text-align: center;">
        <h2>用户登陆</h2>
      </div>
      <form class="form-horizontal col-sm-offset-3" id="loginForm" method="POST">
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
          <div class="col-sm-5">
            <input type="text" class="form-control" name="username" id="username" placeholder="用户名">
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
          <div class="col-sm-5">
            <input type="password" class="form-control" name="pwd" id="pwd" placeholder="密码">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
              <label>
                <input type="checkbox" name="remember-me" id="rememberMe"> 记住密码
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-5">
            <button type="submit" class="btn btn-success btn-block">登 陆</button>
          </div>
        </div>
        <a href="/register" class="col-sm-offset-6" style="margin-top: 10px;">马上注册</a>
      </form>
      
    </div> <!-- /container -->

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/static/js/ie10-viewport-bug-workaround.js"></script>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/bootstrapValidator.min.js"></script>
    <script>
      $(function(){

        $('#loginForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: 'The username is not valid',
                    validators: {
                        notEmpty: {
                            message: 'The username is required and cannot be empty'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: 'The username must be more than 6 and less than 30 characters long'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: 'The username can only consist of alphabetical, number, dot and underscore'
                        },
                        different: {
                            field: 'pwd',
                            message: 'The username and password cannot be the same as each other'
                        }
                    }
                },
                pwd: {
                    validators: {
                        notEmpty: {
                            message: 'The password is required and cannot be empty'
                        },
                        different: {
                            field: 'username',
                            message: 'The password cannot be the same as username'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: 'The password must be more than 6 and less than 30 characters long'
                        }
                    }
                }
            },
            submitHandler: function (validator, form, submitButton) {
                var username = $("#username").val();
                var pwd = $("#pwd").val();
                var rememberMe = $("#rememberMe").prop( "checked" );
                $.ajax({
                   type: "POST",
                   dataType: "json",
                   url: "/login",
                   data: {username:username,pwd:pwd, rememberMe:rememberMe},
                   success: function(result, textStatus, jqXHR){
                     if(result.success){
                      location.href='/';
                     } else {
                      console.log(result.message)
                     }
                   },
                   error:function(XMLHttpRequest, textStatus, errorThrown){
                     console.log(errorThrown)
                   }
                });
            }
        });
      });
    </script>
  </body>
</html>
